<template>
    <div class="type1">
        <div class="finger" ref="finger" v-show="end1">
            点击这里
            <img src="@/static/finger.svg" alt="">
        </div>
        <img src="@/static/voice.png" alt="" class="voice" @click="playaudio" v-show="end1">
        <audio ref="audioRef" :src="mymp3" @ended="enddd"></audio>

        <img :src="mypic" alt="" class="topic" v-if="endsWithAny(mypic.toLowerCase(), ['.png', '.jpg'])">
        <div class="processdetail1" v-else> <video ref="videoPath" controls class="videoPath" :src="mypic"
                @ended="videoPath.controls=false; end1 = true"></video></div>
        <div class="chooses" v-show="choice">
            <div class="item" @click="choose(1)"><img src="@/static/chooses/happy.jpg" alt="">开心</div>
            <div class="item" @click="choose(2)"><img src="@/static/chooses/sad.jpg" alt="">难过</div>
            <div class="item" @click="choose(3)"><img src="@/static/chooses/mad.jpg" alt="">生气</div>
            <div class="item" @click="choose(4)"><img src="@/static/chooses/scare.jpg" alt="">害怕</div>
        </div>
    </div>
</template>
<script setup>
import api from '@/api/user.js'
import { ref, defineProps, onMounted, watch } from 'vue';
import { useAuthStore } from '../store/index';
import { useRouter, useRoute } from 'vue-router';
const videoPath=ref(null);
const finger=ref(null);
const end1 = ref(false);
const choice = ref(false);
const router = useRouter();
const route = useRoute();
const Store = useAuthStore();
function endsWithAny(str, suffixes) {
    return suffixes.some(suffix => str.endsWith(suffix));
}
const time = ref(0);
const timer = ref(null);
const enddd = () => {
    finger.value.style.top='45%';
    choice.value = true;
    timer.value = setInterval(() => {
        choice.value = true;
        time.value += 100
    }, 100);
}
onMounted(() => {

    if (endsWithAny(props.mypic.toLowerCase(), ['.png', '.jpg'])) {
        console.log(1);
        end1.value = true
    }
})
const choose = async (x) => {
    Store.addnowtopic();
    console.log(Store.nowtopic);
    console.log(Store.topics.length);
    let data = {
        correct: x == props.anawer,
    }
    data.answerPath = x;
    await accuracys(data);
    if (Store.nowtopic >= Store.topics.length) {
        if (x == props.anawer) {
            Store.setcorrectnum(++Store.correctnum);
        }
        await addaccuracy();
        Store.settopics([]);
        Store.resetnowtopic();
        Store.setcorrectnum(0);

        // router.push({
        //     path: "/big"
        // })
    }
    else {
        if (x == props.anawer) {
            Store.setcorrectnum(++Store.correctnum);
            router.push({
                path: "/smallreward",
                query: {
                    processnum: Store.topics[0].levelId
                }
            })
        } else {
            router.push({
                path: "/smallerror",
                query: {
                    processnum: Store.topics[0].levelId
                }
            })
            // router.push({
            //     path: "/game",
            //     query: {
            //         processnum: Store.topics[0].levelId
            //     }
            // })
        }

    }

    if (Store.nowtopic >= Store.topics.length) {

        // await addaccuracy();
        // router.push({
        //     path: "/big"
        // })
    }
}
const addaccuracy = () => {
    try {
        return new Promise((resolve) => {
            let number = 10;
            if (route.query.processnum / 8 > 3) {
                number = 6;
            }
            api.accuracy({
                "accuracy": Store.correctnum / number,
                "type": "test",
                "level": route.query.processnum
            })
                .then((res) => {
                    console.log(Store.correctnum);
                    if (Store.correctnum / number >= 0.7) {
                        addachieve();
                    } else {
                        router.push({
                            path: "/unreward", query: {

                                proccess: route.query.processnum
                            }
                        })
                    }

                    resolve(1);
                })
        })
    } catch (error) {

    }

}
const addachieve = () => {
    const reward = Math.floor(Math.random() * 4) + 1
    router.push({
        path: "/preward", query: {
            reward: reward,
            proccess: route.query.processnum
        }
    })
    api.addachieve({
        rewardId: reward
    })
}
const accuracys = async (x) => {
    return new Promise(async (resolve, reject) => {
        clearInterval(timer.value);
        await api.addrecord({
            "correct": Number(x.correct),
            "levels": route.query.processnum,
            answerPath: x.answerPath,
            "questionId": props.id,
            "testType": "test",
            "selectAnswerDuration": String(time.value)
        })
            .then(async (res) => {
                resolve(res);
            })
    })


}
const props = defineProps({
    mymp3: {
        type: String,
        required: true
    },
    mypic: {
        type: String,
        required: true
    },
    anawer: {
        type: String,
        required: true
    }, id: {
        type: String,
        required: true
    }
});
watch(()=>props.mypic, (newValue, oldValue) => {
    console.log(props.mypic.toLowerCase());
    if (endsWithAny(newValue.toLowerCase(), ['.png', '.jpg'])) {
        end1.value = true
    }
    // 在这里可以执行相应的逻辑操作
}, { deep: true });
const audioRef = ref();

const playaudio = () => {
    console.log(audioRef.value.src);
    if (audioRef.value) {
        audioRef.value.play().catch(error => {
            console.error('Error playing audio:', error);
        });
    }
};
</script>
<style lang="scss" scoped>
.finger {
    position: absolute;
    display: flex;
    left: 50%;
    top: 55%;
    transform: translate(-20rem, -20rem);
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: red;
    font-weight: 900;

    img {
        transform: rotate(90deg);
    }
}

.type1 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    .processdetail1 {
        background-image: url("@/static/processdetail2.jpg");
        background-size: cover;
        height: 30.5rem;
        width: 40rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 3rem;

        img {
            height: 90%;
            width: 90%;
        }
    }

    .videoPath {
        z-index: 3;
        height: 100%;
        width: 100%;
    }

    .voice {

        height: 8rem;
        width: 8rem;
    }

    .topic {
        height: 30rem;
        width: 30rem;
    }

    .chooses {
        background-color: #fbe5d6;
        width: 60rem;
        height: 12rem;
        border-radius: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3rem;

        .item {
            display: flex;
            flex-direction: column;
            font-size: 2rem;
            width: 15%;
            height: 100%;
            img{
         transform: scale(0.8);
            }
        }
    }
}
</style>